<template>
	<basic-layout>
		<template #header>
			<div class="header">
				<a-menu
					mode="horizontal"
					:default-selected-keys="selectedKey"
				>
					<a-menu-item
						key="0"
						:style="{
							padding: 0,
							marginRight: '38px',
						}"
						disabled
					>
						<div
							:style="{
								width: '80px',
								height: '30px',
								borderRadius: '2px',
								background: 'var(--color-fill-3)',
								cursor: 'text',
							}"
						/>
					</a-menu-item>

					<RouterLink
						v-for="route in filteredRoutes"
						:key="route.path"
						:to="route.path"
					>
						<a-menu-item :key="route.path">{{ route.name }} </a-menu-item>
					</RouterLink>
				</a-menu>
			</div>
		</template>

		<template #content>
			<router-view />
		</template>
		<template #footer> footer</template>
	</basic-layout>
</template>
<script setup lang="ts">
import { RouterLink, RouterView, useRouter } from 'vue-router';
import { routes } from '@/router/routes';
import BasicLayout from '@/layouts/BasicLayout.vue';
import { ref } from 'vue';
import { RouteTypeEnum } from '@/enums/RouteTypeEnum';
import { userLoginUserStore } from '@/stores/loginUser';
import { checkAuthorization } from '@/utils/Authorization';

const router = useRouter();
const selectedKey = ref([router.currentRoute.value.path]);
router.isReady().then(() => {
	selectedKey.value[0] = router.currentRoute.value.path;
});
const loginUserStore = userLoginUserStore();
const filteredRoutes = routes[0].children.filter(r => {
	if (!r.meta) {
		return false;
	}
	return r.meta.routeType === RouteTypeEnum.NAVIGATION && checkAuthorization(loginUserStore.loginUser, r.meta.roleNeed);
});
</script>
<style scoped></style>
